<template>
  <div class="settilein">
    <van-nav-bar>
    <template #left>
      <van-icon @click="$router.back()" color="#fff" name="arrow-left" size="20" />
      <span class="company">家政求职</span>
    </template>
    </van-nav-bar>
    <div class="action">
        <van-cell-group>
          <van-cell title="做家政" >
              <template #icon>
                  <span class="icon"></span>
              </template>
          </van-cell>
        </van-cell-group>

        <!-- 表单 -->
        <van-form @submit="onSubmit">
        <van-field
          name="姓名"
          label="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          name="手机号码"
          label="手机号码"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-cell-group>
          <van-cell title="意向岗位" >
          </van-cell>
        </van-cell-group>
        <van-cell-group>
            <div class="yewu">
                <van-tag plain type="primary" round color='#666' size="large">月嫂</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">育婴师</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">保洁</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">保姆</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">早教</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">养老</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">家装</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">产康师</van-tag>
            </div>
        </van-cell-group>
        <van-cell-group>
          <van-cell title="已获证书" >
          </van-cell>
        </van-cell-group>
        <van-cell-group>
            <div class="yewu">
                <van-tag plain type="primary" round color='#666' size="large">月嫂</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">育婴师</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">保洁</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">保姆</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">早教</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">养老</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">家装</van-tag>
                <van-tag plain type="primary" round color='#666' size="large">产康师</van-tag>
            </div>
        </van-cell-group>
        <van-field
          name="籍贯"
          label="籍贯"
          :rules="[{ required: true, message: '请填写籍贯' }]"
        />

        <van-field
          name="现居地址"
          label="现居地址"
          :rules="[{ required: true, message: '请填写现居地址' }]"
        />
        <van-field
          readonly
          clickable
          name="picker"
          label="意向家政公司"
          :value="value"
          placeholder="请选择"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field
          name="备注信息"
          label="备注信息"
          :rules="[{ required: true, message: '请填写备注信息' }]"
        />
    <!-- <van-cell-group> -->
    <div class="btn" style="margin: 16px;">
        <van-button  block type="info" native-type="submit">提交</van-button>
    </div>
    <!-- </van-cell-group> -->
    </van-form>

    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: ['1', '2', '3'],
      value: '',
      showPicker: false,
    }
  },
  methods: {
    // 表单提交
    onSubmit () {

    },
    // 点击家政公司
    onConfirm (value, index) {
      this.value1 = value
      this.showPicker1 = false
    },
  },
}
</script>

<style scoped lang='scss'>
.settilein{
    position: relative;
    background-color: rgb(223, 219, 219);
    .action{
        position: relative;
        transform: translateY(-50px);
        // height: 1080px;
        margin: 0 20px;
        padding-bottom: 50px;
        border-radius: 10px;
        background-color: #fff;
        z-index: 99999;
        .icon{
            width: 10px;
            height: 30px;
            margin: 10px 10px 0 0;
            background-color: #3f51b5;
        }
    }
}
.van-nav-bar{
    height: 200px;
    font-weight: 700;
    color: #fff;
    background-color: #3f51b5;
}
.yewu{
    margin: 0 20px;
    .van-tag--plain {
        margin: 20px 20px 0px 20px;
    }
}
.van-button--info{

    background-color: #3f51b5;
}
</style>
